<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 添加 viewport 元标签 -->
    <title>Document Preview</title>
    <style>
        body { 
            margin: 0; 
            padding: 0; 
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 设置页面高度为视窗高度 */
            background-color: #f5f5f5; /* 背景颜色 */
        }
        #preview-container {
            position: relative;
            width: 100%;
            max-width: 100%;
            max-height: 100vh;
            overflow: auto;
        }
        iframe, img {
            width: 100%;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <div id="preview-container"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const urlParams = new URLSearchParams(window.location.search);
            const src = urlParams.get('src');

            if (!src) {
                document.getElementById('preview-container').innerHTML = 'No source provided.';
                return;
            }

            if (src.endsWith('.pdf')) {
                document.getElementById('preview-container').innerHTML = `
                    <iframe src="${src}" style="width:100%; height:auto;" frameborder="0"></iframe>
                `;
            } else if (src.endsWith('.docx')) {
                const iframe = document.createElement('iframe');
                iframe.src = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(src)}&language=en`;
                iframe.style.width = '100%';
                iframe.style.height = 'auto';
                document.getElementById('preview-container').appendChild(iframe);
            } else if (src.endsWith('.jpg') || src.endsWith('.png')) {
                document.getElementById('preview-container').innerHTML = `
                    <img src="${src}" style="max-width:100%; max-height:100%;" />
                `;
            } else {
                document.getElementById('preview-container').innerHTML = 'Unsupported file type.';
            }
        });
    </script>
</body>
</html>